﻿@model Auction_Intranet.Models.ProfileModel
@{
    ViewBag.Title = "Profile";
}

<div class="page profile">
    <h2 class="page-title">Personal</h2>    
    <section class="profile-informations">
        <div class="container-1 col black-shadow-box">
            <p><span class="item-title">Name:</span>@Model.user.Name</p>
            <p><span class="item-title">Username:</span>@Model.user.Username</p>
            <p><span class="item-title">Email:</span>@Model.user.Email</p>
            <p><span class="item-title">Studies</span>@Model.user.Study</p>
            <p><span class="item-title">Department:</span>@Model.user.Department</p>
            <p><span class="item-title">Balance:</span>@Model.user.Balance</p>
            <h3>Credit distribution</h3>
            <p><span class="item-title">User credit:</span><span class="credit-user" data-id="@Model.userStat.userCredit">@Model.userStat.userCredit</span</p>
            <p><span class="item-title">Investsed refundable:</span><span class="credit-refund" data-id="@Model.userStat.investedRefundable">@Model.userStat.investedRefundable</span></p>
            <p><span class="item-title">Invested non refundable:</span><span class="credit-unrefund" data-id="@Model.userStat.investedNonRefundable">@Model.userStat.investedNonRefundable</span></p>
            <p><span class="item-title">Spent credit:</span><span class="credit-spent" data-id="@Model.userStat.spentCredit">@Model.userStat.spentCredit</span></p>
        </div>
        <div class="container-2 col">
            <div id="container"></div>
        </div>            
    </section>   
    <h2 class="subpage-title profile-bids-title">Bids for @Model.user.Username</h2>
    @{
        Html.RenderPartial("_BidsTable", @Model.singleBids);
    }
</div>

<script src="@Url.Content("~/Scripts/highcharts.js")"></script>
<script src="@Url.Content("~/Scripts/modules/exporting.js")"></script> 
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
        
            // Radialize the colors
            Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
                return {
                    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, color],
                        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                    ]
                };
            });

            Highcharts.theme = {
                //colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                chart: {
                    backgroundColor: 'transparent',
                    borderWidth: 0,
                    plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                    plotShadow: true,
                    plotBorderWidth: 1
                },
                title: {
                    style: {
                        color: '#000',
                        font: 'bold 14px Helvetica, sans-serif, Arial'
                    }
                },
                subtitle: {
                    style: {
                        color: '#DDD',
                        font: '12px Helvetica, sans-serif, Arial'
                    }
                },
                xAxis: {                    
                    gridLineWidth: 1,
                    lineColor: '#000',
                    tickColor: '#000',
                    labels: {
                        style: {
                            color: '#333',
                            fontWeight: 'bold',
                            font: 'bold 12px Helvetica, sans-serif, Arial'
                        }
                    },
                    title: {
                        style: {
                            color: '#2F2F2F',
                            font: 'bold 14px Helvetica, sans-serif, Arial'

                        }
                    }
                },
                yAxis: {
                    minorTickInterval: 'auto',
                    lineColor: '#000',
                    lineWidth: 1,
                    tickWidth: 1,
                    tickColor: '#000',
                    labels: {
                        style: {
                            color: '#000',
                            font: '11px Helvetica, sans-serif, Arial'
                        }
                    },
                    title: {
                        style: {
                            color: '#333',
                            fontWeight: 'bold',
                            fontSize: '12px',
                            fontFamily: 'Helvetica, sans-serif, Arial'
                        }
                    }
                },
                legend: {
                    itemStyle: {
                        color: '#333'
                    },
                    itemHoverStyle: {
                        color: '#CCC'
                    },
                    itemHiddenStyle: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#CCC'
                    }
                }
            };

            // Apply the theme
            Highcharts.setOptions(Highcharts.theme);


            var var1 = $(".credit-user").attr("data-id");
            var var2 = $(".credit-refund").attr("data-id");
            var var3 = $(".credit-unrefund").attr("data-id");
            var var4 = $(".credit-spent").attr("data-id");            

            // Build the chart
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Credit distribution'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.y} or {point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Distribution',
                    data: [
                        {
                            name: 'Available',
                            y: parseFloat(var1),
                            sliced: true,
                            selected: true
                        },
                        ['Refundable', parseFloat(var2)],
                        ['Non-refundable', parseFloat(var3)],
                        ['Spent', parseFloat(var4)]
                    ]
                    }]
                ,
                exporting: {
                    enabled: false
                }
            });
        });    
    });
</script>